<template>
    <div>
        <h3>发表评论</h3><hr>
        <textarea rows="5" v-model="such" ref="text" @focus="focus" @keydown.enter="push" @keyup.enter="go"></textarea>
        <mt-button type='primary' size='large' @click="go">发表评论</mt-button>
        <ul class="ul">
            <li class="cc" v-for="(item,i) in list" :key='item.id'>
                <span>{{'第'+(i+1)+'楼'}}{{item.id}}</span>
                <br>
                {{item.detail}} 
            </li>
        </ul>
        <mt-button type='danger' size='large' @click="fresh" plain>加载更多</mt-button>
    </div>
</template>
 
<script>
import { Toast } from 'mint-ui'
export default {
    data(){
        return {
            such:'发表评论',
            list: [],
            flag: false,
            n: 4,
        }
    },
    beforeUpdate() {
        },
    created(){
        if(this.$route.params.uid){
            this.list = JSON.parse(localStorage.getItem('comment.vue'+ this.$route.params.uid + '/' +this.$route.params.id) || '[]')
            }else{
            this.list = JSON.parse(localStorage.getItem('comment.vue' +this.$route.params.id) || '[]')
            }
    },
    methods:{
        focus(){
            if (this.such == '发表评论'){
                this.such =''
            }
        },
        push(){
            if ( this.such == '发表评论' || this.such == '' ){
                this.flag = true
            }
        },
        go(){
            this.push()
            var fax = {}
            fax.htmlid = this.$route.params.id
            fax.time = new Date()
            fax.id = fax.time.valueOf()
            fax.detail = this.such
            this.such = '发表评论'
            if (this.flag){
                this.flag = false
                return Toast('请输入评论')
            }
            this.list.push(fax)
            if(this.$route.params.uid){
            localStorage.setItem('comment.vue'+ this.$route.params.uid + '/' +fax.htmlid,JSON.stringify(this.list))
            }else{
            localStorage.setItem('comment.vue'+fax.htmlid,JSON.stringify(this.list))
            }
            this.flag = false
        },
        fresh(){
            this.n += 2
        },
    }
}
</script>

<style scoped>
ul li span span{
    display: inline-block;
    width: 100%;
    background-color: grey;
    color: white;
    margin-bottom: 14px;
}
.ul{
    padding: 0;
}
.cc{
    list-style: none;
    padding: 15px 5px;
    border-bottom: 1px #333 solid;
}
</style>